<template>
  <div class="background">
    <!-- 上半部分表格 -->
    <el-table
      :data="listData"
      border
      class="top"
      :header-cell-style="{ background: '#eee', color: '#000000' }">
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        min-width="20px"
        :fixed="item.fixed === 'left' ? item.fixed : undefined"
        show-overflow-tooltip
        align="center"
      />
    </el-table>
    <!-- 下半部分表格 -->
    <vue-seamless-scroll
      :data="listData"
      class="seamless-warp"
      :class-option="optionHover">
      <el-table :data="listData"
                class="bottom"
                border
                :header-cell-style="{ background: '#eee', color: '#000000' }"
                style="width: 100%"
      >
        <el-table-column
          flex
          v-for="(item, index) in columns"
          :key="index + 'i'"
          :label="item.label"
          :prop="item.prop"
          min-width="20px"
          :show-overflow-tooltip="true"
          align="center"
        />
      </el-table>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  name: 'TableData',
  components: {
    vueSeamlessScroll // 注册组件
  },
  data() {
    return {
      status: false,
      listData: [
        { xh: '14', nd: '2022', dwmc: '第一工程公司', xmjs: '36', dqfxe: '133388489.25' },
        { xh: '15', nd: '2022', dwmc: '国际公司', xmjs: '15', dqfxe: '109902682.79' },
        { xh: '16', nd: '2022', dwmc: '华中分公司', xmjs: '11', dqfxe: '36133584.6' },
        { xh: '17', nd: '2022', dwmc: '机电制造安装公司', xmjs: '10', dqfxe: '31814442.1' },
        { xh: '18', nd: '2022', dwmc: '科研设计咨询公司', xmjs: '10', dqfxe: '6662118.65' },
        { xh: '19', nd: '2022', dwmc: '西藏分公司', xmjs: '1', dqfxe: '1302330.86' },
        { xh: '20', nd: '2022', dwmc: '西南分公司', xmjs: '3', dqfxe: '14600227.59' },
        { xh: '21', nd: '2021', dwmc: '第二工程公司', xmjs: '35', dqfxe: '144589651.46' },
        { xh: '22', nd: '2021', dwmc: '第三工程公司', xmjs: '29', dqfxe: '84913404.65' },
        { xh: '23', nd: '2021', dwmc: '第四工程公司', xmjs: '19', dqfxe: '62466746.81' },
        { xh: '24', nd: '2021', dwmc: '第五工程公司', xmjs: '30', dqfxe: '97115834.25' }
      ],
      columns: [
        { prop: 'xh', label: '序号', fixed: 'left' },
        { prop: 'nd', label: '年度', fixed: 'left' },
        { prop: 'dwmc', label: '单位名称', fixed: 'left' },
        { prop: 'xmjs', label: '项目数', fixed: 'left' },
        { prop: 'dqfxe', label: '当前发生额', fixed: 'left' }
      ],
    };
  },
  computed: {
    optionHover() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  list-style: none;
}
ul, li, ol {
  padding: 0;
}
::v-deep .table-style {
  .el-table__header-wrapper {
    display: none;
  }
}
.seamless-warp {
  height: 700px;
  overflow: hidden;
}
.el-table .cell {
  text-align: center;
}
/* 隐藏顶部表格的数据部分 */
::v-deep .top {
  .el-table__body-wrapper {
    display: none;
  }
}
/* 隐藏底部表格的表头部分 */
::v-deep .bottom {
  .el-table__header-wrapper {
    display: none;
  }
}
</style>
